<template>
    <div class="box-bg">
        <div ref="echartsRef" class="main">
            <Header></Header>
            <div class="content">
                <Left class="box-le" :data="leftList" />
                <Map class="map-le" />
                <Left class="box-le" :data="rightList" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import Header from '@/components/Header/index.vue'
import Left from './components/Left.vue';
import Map from "./components/Map.vue"
import { useResize } from "@/hooks/useResize.js"
import { options1, options2, options3, options4, options5, options6 } from "@/common/options.js"
import axios from 'axios'
const echartsRef = ref(null)
onMounted(() => {
    useResize(echartsRef.value)
    init()
})


const init = async () => {
    try {
        const { data: { data: data } } = await axios.get('/api/getOnsInfo?name=disease_foreign')
        const res = JSON.parse(data)
        console.log(res);
    } catch (error) {
        console.error(error);
    }
}


const leftList = reactive([
    {
        title: '新增确诊TOP10',
        dom: 'a',
        options: options1()
    },
    {
        title: '大洲感染总人数趋势图',
        dom: 'b',
        options: options2()
    }, {
        title: '大洲感染人数饼状图',
        dom: 'c',
        options: options3()
    }
])

const rightList = reactive([
    {
        title: '主要疫情国家治愈率',
        dom: 'd',
        options: options4()
    },
    {
        title: '世界每周新增治愈和死亡人数',
        dom: 'e',
        options: options5()
    }, {
        title: '境外输入病情top10省份',
        dom: 'f',
        options: options6()
    }
])





</script>
<style scoped lang="scss">
.main {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transition: all 0.3s;
    transform-origin: left top;
}

.box-bg {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/image/bg.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-size: cover;
    // background-color: skyblue;
}

.content {
    display: flex;

    .box-le {
        flex: 1.5;
        height: calc(1080px - 100px);
    }

    .map-le {
        flex: 3;
        height: calc(1080px - 100px);
    }
}
</style>